<template>
  <div>
    <div class="good-item display-flex" v-for="(item,subIndex) in list" :key="item.id">
      <div>
        <img class="good-pic" :src="item.goodsPic" alt="">
      </div>
      <div class="flex-1 display-flex flex-direction-column justify-content-flex-justify">
        <div>
          <div  class="good-name beyond-two">[{{item.brandName}}]{{item.goodsName}}</div>
          <div class="good-spec">{{item.goodsSpec?item.goodsSpec:item.spec}}</div>
        </div>


        <div >
          <div class="display-flex justify-content-flex-justify">
            <div class="good-price" v-if="useType!=1">
              <span class="symbol" v-if="item.enquiry==0">&yen;<span class="price" >{{item.taxPrice}}</span><span class="unit">/{{item.unitName}}</span></span>
              <span class="grayTip" v-if="item.enquiry==1">询价</span>
            </div>
            <div class="good-num-operation flex-1">
              <!--显示件数-->
               <span class="good-num-symbol" v-if="useType==1"><span class="good-num">{{item.buyTime}}</span></span>
               <span class="good-num-symbol" v-else>x<span class="good-num">{{item.num}}</span></span>
             <!-- <group>
                <x-number width="40px"></x-number>
              </group>-->
            </div>
          </div>
          <!--<div class="tip">
            已恢复原价
          </div>-->
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  export default {
    props: {
      list:Array,
      useType:Number
    },
    watch: {
      list: function (newVal, oldVal) {
        this.list = newVal;
      }
    }
  }
</script>

<style lang="less" type="text/less" scoped>
  .good-item {
    background: #fff;
    padding: .3rem .3rem 0rem .3rem;
    .grayTip {
      color: #666666;
      font-size: .28rem;
    }
    .good-pic {
      width: 1.84rem;
      height: 1.84rem;
      margin-right: .24rem;
    }
    .good-name{
      font-size:.28rem;
      color:rgba(34,34,34,1);
    }
    .good-spec{
      margin-top: .1rem;
      box-sizing: border-box;
      display: inline-block;
      min-height:.32rem;
      background:#eee;
      border-radius:.16rem;
      font-size: .2rem;
      padding: .01rem .2rem;
      color: #999;
      margin-bottom: .15rem;
    }
    .good-price{
      .symbol{
        color: #FC6E51;
        font-size: 0.22rem;
      }
      .price{
        font-size: 0.36rem;
      }
      .unit{
        font-size: 0.24rem;
        color: #666;
      }
    }
    .good-num-operation{
      text-align: right;
      .good-num-symbol{
        font-size: 0.2rem;
        color: #666;
        .good-num{
          padding-left: .1rem;
          vertical-align: middle;
          font-size: 0.28rem;
        }
      }
    }
    /deep/ .weui-cells{
      margin-top: 0;
    }
   /deep/ .weui-cell{
      padding: 0;
    }
    /deep/ .weui-cells:before,/deep/.weui-cells:after {
      border: none;
    }
    /deep/ .vux-number-selector svg{
      fill: #527DD9;
    }
    /deep/ .vux-number-input{
      font-size: .28rem;
    }
    /deep/  .vux-number-selector-sub,/deep/ .vux-number-selector-plus{
      padding: 4px 6px 2px 6px;
    }
    .tip{
      margin-top: .08rem;
        color: #C51521;
      font-size: .22rem;
      padding-bottom: .05rem;
    }
  }
</style>
